<template>
	<view class="record_box">
		<view class="card_box" v-for="item in recordList" :key="item.id">
			<view class="card_top">
				<view class="card_top_id">编号：{{item.id}}</view>
				<view :class="['card_top_status', {'card_top_status_special': [0,1].includes(Number(item.status))}]">{{switchStatus(item.status)}}</view>
			</view>
			<view class="card_content">
				<view class="card_content_item card_content_item_center">
					<view class="card_content_item_label">挂靠工作室：</view>
					<view class="card_content_item_value">
						<image :src="item.studioAvatar" mode=""></image>
						{{item.studioName}}
					</view>
				</view>
				<view class="card_content_item">
					<view class="card_content_item_label">工作室地址：</view>
					<view class="card_content_item_value line_height_12">{{item.studioAddress}}</view>
				</view>
				<view class="card_content_item">
					<view class="card_content_item_label">提供服务：</view>
					<view class="card_content_item_value line_height_12">
						<view class="card_service_item">{{switchServiceType(item.serviceType)}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onShow, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
import { reactive, computed, ref } from 'vue';
import api from '@/api';

let listParams = {
	page: 1,
	limit: 10
}
let isDataNoMore = false
const recordList = ref([])

onShow(() => {
	initRecordList()
})

const switchStatus = (status) => {
	// 状态 0-提交申请 1-初审通过 2-初审拒绝 3-复审通过 4-复审拒绝
	switch(Number(status)) {
		case 0:
		return '待初审'
		case 1:
		return '待终审'
		case 2:
		return '已拒绝'
		case 3:
		return '已通过'
		case 4:
		return '已拒绝'
	}
}

const switchServiceType = (typeStr) => {
	const typeList = typeStr.split(',')
	const newList = typeList.map(type => {
		// 可提供服务类型：1-上门喂养，2-上门遛狗，3-基础清洁
		switch(Number(type)) {
			case 1:
			return '上门喂猫'
			case 2:
			return '上门遛狗'
			case 3:
			return '基础清洁'
		}
	})
	return newList.join("  |  ")
}

const initRecordList = async () => {
	listParams.page = 1
	isDataNoMore = false
	const list = await getRecordList()
	console.log('list', list)
	recordList.value = list
	console.log('recordList', recordList.value)
}

const getMoreRecordList = async () => {
	if (isDataNoMore) {
		uni.showToast({
			icon: 'none',
			title: '没有更多数据'
		});
		return
	}
	listParams.page ++
	const list = await getRecordList()
	if (list.length < listParams.limit) {
		isDataNoMore = true
	}
	recordList.value = recordList.value.concat(list)
}

const getRecordList = async () => {
	const { data } = await api({
		method: 'get',
		url: `/mall/studio/apply-studio-record/page`,
		data: listParams
	});
	console.log('data.records', data.records)
	return data.records || []
};


onPullDownRefresh(async () => {
	try {
		await initRecordList()
	} catch (error) {
		//TODO handle the exception
	} finally {
		uni.stopPullDownRefresh();
	}
});
onReachBottom(async () => {
	await getMoreRecordList()
});
</script>

<style lang="scss" scoped>
.record_box {
	padding: 32rpx;
}

.card_box {
	margin: 0 auto;
	background-color: #fff;
	border-radius: 24rpx;
	box-sizing: border-box;
	padding: 40rpx 32rpx 32rpx 32rpx;
	line-height: 1;
	margin-bottom: 24rpx;

	.card_top {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.card_top_id {
			font-size: 30rpx;
			color: #7c807f;
		}
		.card_top_status {
			font-weight: bold;
			font-size: 26rpx;
			color: #1B2120;
		}
		.card_top_status_special {
			font-weight: bold;
			font-size: 26rpx;
			color: #ff6084;
		}
	}

	.card_content {
		margin-top: 32rpx;
		margin-bottom: 16rpx;
		padding: 32rpx 0;
		padding-left: 24rpx;
		background-color: #f8f8f8;
		border-radius: 16rpx;
		box-sizing: border-box;

		.card_content_item:first-child,
		.card_content_item:last-child {
			margin: 0;
		}
		.card_content_item {
			display: flex;
			font-size: 26rpx;
			margin: 40rpx 0;

			.card_content_item_label {
				width: 158rpx;
				color: #7c807f;
			}

			.card_content_item_value {
				width: 442rpx;
				color: #5c5e5e;
				display: flex;
				flex-wrap: wrap;
				align-items: center;

				image {
					margin-right: 8rpx;
					width: 64rpx;
					height: 64rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
				}
			}

			.line_height_12 {
				line-height: 1.2;
			}
		}

		.card_content_item_center {
			margin-top: 32rpx;
			display: flex;
			align-items: center;
		}

		.card_service_item {
			border-right: 1rpx solid #cacccc;
			margin-right: 8rpx;
			padding-right: 8rpx;
		}
		.card_service_item:last-child {
			border-right: none;
			margin-right: 0;
			padding-right: 0;
		}
	}

	.card_bottom {
		width: 622rpx;
		border-radius: 16rpx;
		background-color: #f8f8f8;
		.card_bottom_item {
			padding: 32rpx 24rpx;
			display: flex;
			align-items: center;
			font-size: 26rpx;
			box-sizing: border-box;
			.card_bottom_item_label {
				color: #7c807f;
			}
			.card_bottom_item_value {
				color: #5c5e5e;
			}
		}
	}
}
</style>
